<template>
	<view class='ikz-loading' :style="'background-color:'+cssInfo.background_color+';opacity:'+cssInfo.opacity+';display:'+cssInfo.display">
		<view class='ikz-loading-title' :style="'width:'+cssInfo.width+'rpx;height:'+cssInfo.width+'rpx;'" v-if="showInfo.src">
			<image mode="aspectFit" class='ikz-loading-img' :src='adminImgPath+showInfo.src'></image>
		</view>
		<view class='ikz-loading-desc' :style="'color:'+cssInfo.color+';font-size:'+cssInfo.font_size+'rpx;'">
			{{showInfo.title}}
		</view>
	</view>

</template>

<script>
	import ikz from "@/pages/Common/tools"
	export default {
		name: 'banner',
		props: {
			showData: {
				type: Object,
			},
			cssData: {
				type: Object,
			}
		},
		data() {
			return {
				showInfo: {
					title: '',
					src: ''
				},
				cssInfo: {

				},
				adminImgPath: getApp().globalData.adminImgPath
			};
		},
		watch: {
			showData: {
				handler(newName, oldName) {},
				immediate: true,
				deep: true
			},
			cssData: {
				handler(newName, oldName) {

					this.cssInfo.background_color = newName.background_color || '#ffffff';
					this.cssInfo.opacity = newName.opacity || 1;
					this.cssInfo.width = newName.width || 500;
					this.cssInfo.color = newName.color || '#777777';
					this.cssInfo.font_size = newName.font_size || 28;
					this.cssInfo.display = newName.display || 'none';
					this.$forceUpdate();
				},
				immediate: true,
				deep: true
			}
		},
		mounted() {
			this.showInfo.src = getApp().globalData.loadingImg
		},
		methods: {}
	};
</script>

<style>
	/*banner*/
	.ikz-loading {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 9999999;
	}

	.ikz-loading-img {
		width: 100%;
		height: 100%;
	}

	.ikz-loading-desc {
		margin-top: 20rpx;
	}
</style>
